<!--
 * @description: 配置框
 * @Date: 2023-04-11 10:16:48
 * @example: 
 * @params: 
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="Status + ' ' + props.titleType + ' Widget'"
    width="40%"
    :show-close="true"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <div class="container" v-if="props.titleType">
      <div class="comContainer">
             <!-- headLine Config -->
        <div v-if="props.titleType === 'headLine'">
          <HeadlineConfig
            :editval="editValue"
            :opera="Status"
            ref="ComRef"
           
          />
        </div>
        <div v-else-if="props.titleType === 'Boolean'">Boolean</div>
        <div v-else-if="props.titleType === 'Value'">Value</div>
        <!-- Slider Config -->
        <div v-else-if="props.titleType === 'Slider'">
            <SliderConfig 
             :editval="editValue"  
             :opera="Status"
              ref="ComRef"/>
        </div>
        <div v-else-if="props.titleType === 'Image'">Image</div>
        <div v-else-if="props.titleType === 'Value'">Value</div>
        <div v-else-if="props.titleType === 'Chart'">Chart</div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ResetData(props.titleType)">Cancel</el-button>
        <el-button
          type="primary"
          :icon="Select"
          @click="handleSubmistData(props.titleType)"
        >
          Save
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { Select } from "@element-plus/icons-vue";
import HeadlineConfig from "./Headline/HeadlineConfig.vue";
import SliderConfig from "./Slider/SliderConfig.vue";
const dialogVisible = ref(false);
const Status = ref("Add");
const editValue = ref('');
const ComRef = ref();
const props = defineProps({
  titleType: {
    type: String,
    default: () => "",
  },
});
const emits = defineEmits(["handleUpdate"]);

/** 窗口配置 */
const handleOpenDialog = async (statusFont, val) => {
  dialogVisible.value = true;
  if (statusFont === "Edit") {
    Status.value = "Edit";
    editValue.value = val;
  } else {
    Status.value = "Add";
  }
};
const ResetData = (typeName) => {
  dialogVisible.value = false;
  switch (typeName) {
    case "headLine":
      ComRef.value.handleRestData();
      break;
    case "Boolean":
      ComRef.value.handleRestData();
      break;
    case "Value":
      ComRef.value.handleRestData();
      break;
    case "Slider":
      ComRef.value.handleRestData();
      break;
  }
};
const handleUpdate = () => {
  emits("handleUpdate");
}
const handleSubmistData = async (typeName) => {
   dialogVisible.value = false;
  switch (typeName) {
    case "headLine":
      if(Status.value === "Add"){
        await ComRef.value.handleSubmitData();
        handleUpdate();
      }else {
        await ComRef.value.handleEditdata()
        handleUpdate();
      }            
      break;
    case "Boolean":
      ComRef.value.handleRestData();
      break;
    case "Value":
      ComRef.value.handleRestData();
      break;
    case "Slider":
    if(Status.value === "Add"){
        await ComRef.value.handleSubmitData();
        handleUpdate();
      }else {
        await ComRef.value.handleEditdata()
        handleUpdate();
      }            
      break;
  }
};

defineExpose({
  handleOpenDialog,
});
</script>
<style lang="less"></style>
